<title>控制台</title>

<div class="content-header row"></div>

<div class="content-body">
    <div class="row match-height">
        <div class="col-12">
            <div class="">
                <div id="gradient-line-chart1" class="height-250 GradientlineShadow1"></div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xl-4 col-lg-6 col-md-12">
            <div class="card pull-up ecom-card-1 bg-white">
                <div class="card-content ecom-card2 height-180">
                    <h5 class="text-muted danger position-absolute p-1">周用户图表</h5>
                    <div>
                        <i class="ft-pie-chart danger font-large-1 float-right p-1"></i>
                    </div>
                    <div class="progress-stats-container ct-golden-section height-75 position-relative pt-3  ">
                        <div id="progress-stats-bar-chart"></div>
                        <div id="progress-stats-line-chart" class="progress-stats-shadow"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-lg-6 col-md-12">
            <div class="card pull-up ecom-card-1 bg-white">
                <div class="card-content ecom-card2 height-180">
                    <h5 class="text-muted info position-absolute p-1">用户周活跃图表</h5>
                    <div>
                        <i class="ft-activity info font-large-1 float-right p-1"></i>
                    </div>
                    <div class="progress-stats-container ct-golden-section height-75 position-relative pt-3">
                        <div id="progress-stats-bar-chart1"></div>
                        <div id="progress-stats-line-chart1" class="progress-stats-shadow"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-lg-12">
            <div class="card pull-up ecom-card-1 bg-white">
                <div class="card-content ecom-card2 height-180">
                    <h5 class="text-muted warning position-absolute p-1">社保销售图表</h5>
                    <div>
                        <i class="ft-shopping-cart warning font-large-1 float-right p-1"></i>
                    </div>
                    <div class="progress-stats-container ct-golden-section height-75 position-relative pt-3">
                        <div id="progress-stats-bar-chart2"></div>
                        <div id="progress-stats-line-chart2" class="progress-stats-shadow"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 col-lg-8">
            <div class="card pull-up">
                <div class="card-header p-1">
                    <h4 class="card-title float-left">项目相关图表</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-footer text-center p-1">
                        <div class="row">
                            <div class="col-md-3 col-12 border-right-blue-grey border-right-lighten-5 text-center">
                                <p class="blue-grey lighten-2 mb-0">项目总数</p>
                                <p class="font-medium-5 text-bold-400">48570</p>
                            </div>
                            <div class="col-md-3 col-12 border-right-blue-grey border-right-lighten-5 text-center">
                                <p class="blue-grey lighten-2 mb-0">进行中项目</p>
                                <p class="font-medium-5 text-bold-400">36852</p>
                            </div>
                            <div class="col-md-3 col-12 border-right-blue-grey border-right-lighten-5 text-center">
                                <p class="blue-grey lighten-2 mb-0">已结束项目</p>
                                <p class="font-medium-5 text-bold-400">17548</p>
                            </div>
                            <div class="col-md-3 col-12 text-center">
                                <p class="blue-grey lighten-2 mb-0">今日活跃项目</p>
                                <p class="font-medium-5 text-bold-400">28641</p>
                            </div>
                        </div>
                        <hr>
                        <span class="text-muted">当前图表是静态状态,点击右上角更新数据</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card pull-up border-top-info border-top-3 rounded-1">
                <div class="card-header">
                    <h4 class="card-title">新用户 </h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body p-1">
                        <h4 class="font-large-1 text-bold-400">1854 <i class="ft-users float-right"></i></h4>
                    </div>
                    <div class="card-footer p-1">
                        <span class="text-muted"><i class="la la-arrow-circle-o-up info"></i> 23.67% 较昨日增长</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">项目月增长图表</h4>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body p-0 pb-0">
                        <div class="chartist">
                            <div id="project-stats" class="height-350 areaGradientShadow1"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-12">
            <div class="card">
                <div class="card-header ">
                    <h4 class="card-title">在线用户</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content">
                    <div class="card-body text-center">
                        <div class="card-header pt-0 pb-0">
                            <p class="danger darken-2">在线合计</p>
                            <h3 class="display-4 blue-grey lighten-2">14,962</h3>
                        </div>
                        <div class="card-content">
                            <div id="new-customers" class="height-150 donutShadow"></div>
                            <ul class="list-inline clearfix mt-2">
                                <li>
                                    <h1 class="blue-grey lighten-2 text-bold-400">46583</h1>
                                    <span class="danger darken-2"><i class="ft-user"></i> 用户总数合计</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    lucky.require('dashboard', lucky.factory('dashboard'));
</script>